<template>
  <el-container class="container">
    <el-header height="20px">新增教师信息</el-header>
    <!-- 大小可以更换为small, mediun, mini -->
    <el-main>
      <!-- 1. 正常含有placeholder的输入框 -->
      <div>
        <span>工号</span>
        <el-input v-model="input1" placeholder="请输入工号" size="small" />
      </div>

      <!-- 2. 禁止修改的输入框 -->
      <div>
        <span>学号</span>
        <el-input v-model="stuId" size="small" :disabled="true" />
      </div>

      <!-- 3. 密码框 -->
      <div>
        <span>密码</span>
        <el-input placeholder="请输入密码" size="small" v-model="input2" show-password></el-input>
      </div>

      <!-- 4. 文本输入域 -->
      <div>
        <span>内容</span>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="textarea"
        ></el-input>
      </div>

      <!-- 5. 选择器（性别等） -->
      <div>
        <span>性别</span>
        <el-select v-model="value" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      stuId: 20105421,
      textarea: "",
      //5. 选择器（性别等）
      options: [
        {
          value: "男",
          label: "1"
        },
        {
          value: "女",
          label: "2"
        }
      ],
      value: ""
    };
  },
  methods: {}
};
</script>

<style scoped>
.container {
  text-align: center;
  margin-top: 20px;
}

.el-header{
    font-size: 25px;
    color: #333744;
}
.el-input {
  width: 220px;
  margin-top: 20px;
}

.el-main div{
    margin-top: 15px;
}

span {
  margin-right: 25px;
  font-size: 17px;
  color: #333744;
}

.el-textarea {
  width: 300px;
  margin-top: 30px;
  vertical-align: middle;
}

</style>